<script setup>
import { ref }from "vue";
import {ElMessage} from 'element-plus'
import axios from "axios";
import "../assets/date"
import {useRouter} from "vue-router"
import {useStore } from "../store";
let router=useRouter()
let store=useStore()
console.log(store.getname)
let ac=ref("")
let ay=ref("")
function submit(){
    //登录逻辑
          if(!ac.value || !ay.value){
            ElMessage('账号和密码不能为空')
            return false
          }
          //请求登录接口
          axios.post('/api/login',{ac:ac.value,ay:ay.value}).then(res=>{
            console.log(res)
            if(res.data.code==200){
                store.getac(res.data.token,res.data.user)
                router.push("/index")
            }else{
                ElMessage(res.data.msg)
            return false
            }
          })
}
</script>
<template>
    <div class="login">
        <input  v-model="ac"  type="text" placeholder="请输入账号">
        <input v-model="ay" type="password" placeholder="请输入密码">
        <button @click="submit">登录</button>
    </div>
</template>
<style scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 .login{
    width: 370px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    padding: 10px;
 }
 .login input{
    width: 80%;
    height: 40px;
 }
 .login button{
    width: 40%;
    height: 35px;
    background-color: blue;
    
 }
</style>
